 //获取操作对象
 var leftBox=document.querySelector(".leftBox")
 var mark=document.querySelector('.mark')
 var rightBox=document.querySelector(".rightBox")
 var rightImg=document.querySelector('.rightimg')
//  var lis=document.querySelectorAll("li")

 //给左边盒子绑定事件
 leftBox.onmouseover=function(){
     //显示蒙版层和右边盒子
     console.log(123);
     mark.style.display='block'
     rightBox.style.display='block'
 }
 leftBox.onmouseout=function(){
     //隐藏蒙版层和右边盒子
     mark.style.display='none'
     rightBox.style.display='none'
 }
 leftBox.onmousemove=function(e){
     //兼容事件对象
     var  e = e || window.event
     //获取蒙版层的移动距离
     var left1=e.pageX-leftBox.offsetLeft-parseInt(mark.offsetWidth/4)-400
     var top1=e.pageY-leftBox.offsetTop-parseInt(mark.offsetHeight/4)-300
     //给蒙版层设置边界
     var maxX=leftBox.offsetWidth-mark.offsetWidth
     var maxY=leftBox.offsetHeight-mark.offsetHeight
     //右边图片的移动距离
     var imgX,imgY
     //判断水平方向
     if(left1<=0){
         mark.style.left="0px"
         imgX=0
     }else if(left1>=maxX){
         mark.style.left=maxX+'px'
         imgX=maxX
     }else{
         mark.style.left=left1+'px'
         imgX=left1
     }

     //垂直方向
     if(top1<=0){
         mark.style.top="0px"
         imgY=0
     }else if(top1>=maxY){
         mark.style.top=maxY+'px'
         imgY=maxY
     }else{
         mark.style.top=top1+'px'
         imgY=top1
     }

     //移动右边的图片
     rightImg.style.left=-2*imgX+'px'
     rightImg.style.top=-2*imgY+'px'
 }
 //遍历li对象
//  for(var i=0;i<lis.length;i++){
//      //给每个li对象绑定点击事件
//      lis[i].onclick=function(){
//          //清除所有li对象中的class属性
//          for(var j=0;j<lis.length;j++){
//              lis[j].className=''
//          }
//          //获取当前li对象中img的图片地址
//          var url=this.lastElementChild.getAttribute('src')
//          //把当前图片地址赋值给上面的图片
//          leftBox.firstElementChild.setAttribute('src',url)
//          rightImg.setAttribute('src',url)
//          //给当前点击的li对象添加class属性
//          this.className='bd'
//      }
//  }